<template>
  <dv-full-screen-container>
    <div class="header">运输管理</div>
    <div class="flex-row gap-20">
      <div>
        左侧
      </div>
      <div class="flex-column gap-40">
        <div class="box-middle-1">
<map3-d></map3-d>
        </div>
      </div>
      <div class="flex-column gap-40">
        <div class="box-right-1">
          <dv-border-box-10>

          </dv-border-box-10>
        </div>
        <div class="box-right-2">
          <dv-border-box-10>
            <dv-capsule-chart :config="boxRightConfig" style="width:300px;height:200px"/>
          </dv-border-box-10>
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<script>
import Map3D from "@/components/map3d/map.vue";

export default {
  name: "transport",
  components: {Map3D},
  data() {
    return {
      boxRightConfig: {
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 123
          },
          {
            name: '漯河',
            value: 98
          },
          {
            name: '郑州',
            value: 75
          },
          {
            name: '西峡',
            value: 66
          },
        ],
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '单位',
        showValue: true
      },
    }
  },
}
</script>

<style scoped>
#dv-full-screen-container {
  background-image: url("@/assets/images/bg.png");
  background-size: 100% 100%;
}

.header {
  height: 85px;
  color: #FFFFFF;
}
.box-middle-1{
  width: 816px;
  height: 316px;
}

.box-right-1 {
  width: 503px;
  height: 419px;
}

.box-right-2 {
  width: 503px;
  height: 471px;
}
</style>